<template>
  <div class="hello">
    <vHeader></vHeader>

    <!-- Home Section -->

    <section id="home" class="main-home parallax-section">
      <div class="overlay"></div>
      <div id="particles-js"></div>
      <div class="container">
        <div class="row">

          <div class="col-md-12 col-sm-12">
            <h1>Hello! This is Neuron.</h1>
            <h4>Responsive Blog HTML CSS Website Template</h4>
            <a href="#blog" class="smoothScroll btn btn-default">Discover More</a>
          </div>

        </div>
      </div>
    </section>

    <!-- Blog Section -->

    <section id="blog">
      <div class="container">
        <div class="row">

          <div class="col-md-offset-1 col-md-10 col-sm-12">
           <blogInfo></blogInfo>
           <blogInfo></blogInfo>
           <blogInfo></blogInfo>
           <blogInfo></blogInfo>
          </div>

        </div>
      </div>
    </section>

    <!-- Footer Section -->

    <vFooter></vFooter>

    <!-- Back top -->
    <backtotop></backtotop>

  </div>
</template>

<script>
import vHeader from "../components/header";
import vFooter from "../components/footer";
import blogInfo from '../components/blog-post-thumb'
import backtotop from "../components/BackToTop";
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  components: { vHeader, vFooter, backtotop,blogInfo },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
